<template>
  <div>
    <!-- 人工调整 -->
    <el-dialog
      title="人工调整"
      :visible.sync="dialogFormVisible"
      width="566px"
    >
      <!-- 表单区域 -->
      <el-form
        ref="dataForm"
        label-position="right"
        label-width="120px"
        style="width: 100%"
        :model="formBase"
        :rules="ruleInManualAdjustment"
      >
        <el-form-item class="radio">
          <el-radio
            v-model="formBase.workPatternType"
            label="1"
          >礼拜制</el-radio>
          <el-radio
            v-model="formBase.workPatternType"
            label="2"
          >连续制</el-radio>
        </el-form-item>
        <el-form-item
          label="模式名称:"
          prop="workPatternId"
        >
          <el-select
            v-model="formBase.workPatternId"
            placeholder="请选择"
          >
            <el-option
              v-for="item in workModeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 操作区域 -->
      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button
          class="save-btn"
          @click="submitFn"
        >确认</el-button>
        <el-button
          class="cancel-btn"
          @click="dialogFormH"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { peopleSet } from '@/api/transit'
export default {
  props: {
    workModeList: {
      type: Array,
      required: true
    },
    formBase: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      flag: true, // 防止重复点击生成一下生成很多条相同的数据
      ruleInManualAdjustment: {
        workPatternId: [
          {
            required: true,
            message: '请选择模式名称',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 弹层显示
    dialogFormV() {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH() {
      this.dialogFormVisible = false
      this.$refs['dataForm'].resetFields()
    },
    submitFn() {
      if (!this.flag) {
        return
      }
      this.flag = false
      // 等待校验规则是否合规
      this.$refs['dataForm'].validate(async (valid) => {
        if (valid) {
          const data = {
            userIdList: this.formBase.userIdList,
            workPatternId: this.formBase.workPatternId,
            workPatternType: this.formBase.workPatternType
          }
          console.log(data)
          //   修改排班
          await peopleSet(data).then((res) => {
            if (String(res.code) === '200') {
              console.log(res)
              this.$message.success('调整排班成功！')
            } else {
              this.$message.error(res.msg || '调整排班失败')
            }
          }).catch((err) => {
            this.$message.error(err.msg || '调整排班失败')
          })
          // 通知父组件
          this.$emit('newDataes')
          // 关闭弹窗
          this.dialogFormH()
          this.flag = true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
    padding: 30px 50px 10px 50px !important;
    .radio .el-form-item__content {
        margin-left: 40px !important;
    }
    .el-form-item__content {
       .el-radio:first-child {
           margin-right: 80px;
       }
       .el-radio__label {
           font-weight: 700;
           color: #333;
       }
       .el-select {
        width: 290px;
       }
   }
}
.dialog-footer {
  .save-btn{
      background-color: #e15536;
      border: 1px solid #e15536;
      color: #fff;
    }
    .save-btn:hover{
      background-color: #ffab98;
      border: 1px solid #ffab98;
    }
}
</style>
